<template>
	<view>
		<view class="content">
			<view class="price card items-center justify-between">
				<view class="left">
					收费金额
				</view>
				<view class="right">
					{{price}}元/年
				</view>
			</view>
			<view class="payType card">
				<view class="title">
					选择支付方式
				</view>
				<view class="list">
					<view 
					class="item items-center justify-between" 
					@click="isType = index" 
					v-for="(item,index) in payList" :key="index">
						<view class="left items-center">
							<image class="icon" :src="item.icon" mode=""></image>
							<view class="text">
								{{item.name}}
							</view>
						</view>
						<view class="right">
							<image v-if="isType == index" class="image-block" src="../../static/img/xz.png" mode=""></image>
							<image v-else class="image-block" src="../../static/img/wxz.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="btn" @click="payFn">
				立即续费
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payList:[{
					name:'微信支付',
					icon:'/static/img/wexin.png'
				}],
				// ,{
				// 	name:'电站钱包',
				// 	icon:'/static/img/qb-yue.png'
				// }
				isType:0,
				price:'',
				type:'',
				num:'',
				isChe:''
			};
		},
		onLoad(e) {
			if(e.type) this.type = e.type
			if(e.isType) this.isChe = e.isType
			if(e.num) this.num = e.num
			this.priceFn()
		},
		methods:{
			async priceFn(){
				var type = ''
				if(this.type == 1){
					type = 8
				}else{
					this.isChe == '0' ? type = 6 : type = 7
				}
				let res = await this.$request('content/text',{type})
				if(res.result == '0'){
					this.price = res.data.content
				}
			},
			async payFn(){
				var payType = this.isType
				// #ifdef APP-PLUS
				payType = this.isType == 0 ? 2 : this.isType
				// #endif
				let res = await this.$request('user/pay-card',{
					uid:uni.getStorageSync('uid'),
					type:this.type,
					num:this.num,
					price:this.price,
					payType
				})
				if(res.result == '0'){
					if(this.isType == 1){
						this.navTo('/pages_invoice/invoice/submit?type=2')
						return
					}
					uni.requestPayment({
						provider:"wxpay",
						orderInfo:res.data.body,
						timeStamp:res.data.body.timestamp,
						nonceStr:res.data.body.noncestr,
						package:`prepay_id=${res.data.body.prepayid}`,
						signType: res.data.body.signType,
						paySign: res.data.body.sign,
						success:(e)=> {
							this.navTo('/pages_invoice/invoice/submit?type=2')
						},
						fail:()=> {
							this.$util.msg('取消支付')
						}
					})
				}
			},
		},
	}
</script>

<style lang="scss" scoped> 
	.content{
		padding: 20rpx;
		.card{
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
		}
		.price{
			.left{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #666666;
			}
			.right{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FD4E3C;
			}
		}
		.payType{
			.title{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #666666;
			}
			.list{
				margin-top: 20rpx;
				.item{
					padding: 20rpx 0;
					.left{
						.icon{
							width: 46rpx;
							height: 46rpx;
						}
						.text{
							margin-left: 20rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #333333;
						}
					}
					.right{
						width: 40rpx;
						height: 40rpx;
						.image-block{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
	.foot{
		margin-top: 50rpx;
		.btn{
			width: 640rpx;
			height: 110rpx;
			background: $uni-color-bg;
			border-radius: 55rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fff;
			line-height: 110rpx;
			text-align: center;
			margin: 0 auto;
		}
	}
</style>
